<!-- 新闻详情 -->
<template>
  <div class="vipboard-news-info">
    <el-dialog :visible.sync="visible"
top="0" :modal-append-to-body="false" fullscreen :show-close="false" :modal="false">
      <i @click="close" class="jeicon jeicon-error pointer"/>
      <div class="news-info-body">
        <div>
          <!-- 标题 -->
          <div class="title">
{{ item.XWGL_BT }}
</div>
          <!-- 副标题 -->
          <div class="subtitle">
            <span class="user">{{ item.SY_CREATEUSERNAME }} 于 {{ item.SY_CREATETIME }} 发布在{{ item.NOTICE_NOTICETYPE_NAME }}</span>
            <span class="action">
              <span calss="see">
                <i class="fa fa-eye"/> {{ num || 0 }}
              </span>
              <span :class="{'zaned':zaned}" class="zan" @click="doZan">
                <i
:class="{
                                        'jeicon-thumbs-up-o':!zaned,
                                        'jeicon-thumbs-up':zaned
                                    }"
                                    class="jeicon"
                /> {{ item.XWGL_DZL || 0 }}
              </span>
            </span>
          </div>
          <!-- 内容 -->
          <div v-html="content" class="content"/>
          <button type="button"
@click="close" class="el-button--primary el-button--medium el-button el-button-style">
<span>关  闭</span>
</button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { updateThumbsUp } from '../../actions/api.js';

export default {
  name: 'NewsInfo',
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    visible: {
      type: Boolean,
      default: () => false,
    },
    num: {
      type: String,
      default: () => '0',
    },

  },
  data() {
    return {
      index: 0,
    };
  },
  computed: {
    zaned() { // 是否点赞过
      return this.item.thumbsUp === '1';
    },
    content() { // 内容
      return Ext.htmlDecode(this.item.XWGL_NR);
    },
  },
  methods: {
    doZan(){
            updateThumbsUp({ id: this.item.VIP_XWGL_ID }).then((data) => {
                this.item.XWGL_DZL = data.obj;
            })
        },
    close() {
      this.$emit('close');
    },
  },
};
</script>
<style lang="scss" >
    .jeicon-error {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
    }
    .el-button-style{
        background: #2f6bcf;
        bottom: 20px;
        left:50%;
        border:none;
        position: fixed;
        transform: translate(-50%, 0);
    }
    .vipboard-news-info{
        .news-info-body{
            &::-webkit-scrollbar {
                display:none
            }
            width: 1250px;
            height:100%;
            overflow: auto;
            background: #ffffff;
            position: absolute;
            top:0;
            left:50%;
            margin-left:-625px;
            .title{
                font-size: 24px;
                text-align: center;
                padding: 10px;
                font-weight: bold;
                margin-top: 30px;
            }
            .subtitle{
                text-align: center;
                position: relative;
                .action{
                    position: absolute;
                    left:50%;
                    margin-left: 200px;
                    .zan,.see{
                        margin: 0 5px;
                        i{
                            font-size: 14px;
                        }
                    }
                    .zan{
                        cursor: pointer;
                        &.zaned{
                            cursor:auto;
                            i{
                                color: #f7ba2a;
                            }
                        }
                    }
                }
            }
            .content{
                padding:40px;
            }

        }
        .el-dialog.is-fullscreen{
            background-color: #f0f2f5;
            .el-dialog__header{
                display: none;
            }
            .el-dialog__body{
                height: 100%;
                padding: 0 20px;
                background: #f0f2f5;
            }
            .el-dialog__close{
                position: fixed;
                right:20px;
                top:20px;
                font-size: 20px;
                cursor: pointer;
            }
            .el-dialog__close:hover{
                color: #2f6bcf;
            }
        }
    }
</style>
